<template>
  <div>
    <div @click="toggleBar" class="bar">| | |</div>
    <el-menu
      router
      :default-active = "deOpen.toString()"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="isUnique"
    >
      <el-submenu :index="'/'+firstItem.path" v-for="(firstItem,i) in menuList" :key="i">
        <template slot="title">
          <i class="el-icon-user-solid" v-if="firstItem.authName == '用户管理'"></i>
          <i class="el-icon-s-management" v-if="firstItem.authName == '权限管理'"></i>
          <i class="el-icon-s-goods" v-if="firstItem.authName == '商品管理'"></i>
          <i class="el-icon-s-shop" v-if="firstItem.authName == '订单管理'"></i>
          <i class="el-icon-s-marketing" v-if="firstItem.authName == '数据统计'"></i>
          
          <span>{{firstItem.authName}}</span>
        </template>
        <el-menu-item :index="'/'+secondItem.path" v-for="(secondItem,i) in firstItem.children" :key="i">
          <i class="el-icon-menu"></i>
          <span>{{secondItem.authName}}</span>
        </el-menu-item>
      </el-submenu>
      
    </el-menu>
  </div>
</template> 

<script>
import { getMenusList } from "../api/index";

export default {
  data() {
    return {
      isCollapse: false,
      isUnique: true,
      menuList: [],
      deOpen: ['/users'],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toggleBar() {
      this.isCollapse = !this.isCollapse;
    },
    defaultOpen(){
        this.deOpen = [window.location.href.split("#")[1]]
    },
    async leftMenu() {
      let res = await getMenusList();
      // console.log(res);
      let {
        data,
        meta: { status },
      } = res;
      if (status == 200) {
        this.menuList = data;
      }
    },
  },
  mounted() {
    this.leftMenu();
    this.defaultOpen()
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  border: none;
}
.bar {
  height: 30px;
  background-color: #ccc;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
</style>
